<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        
        <script src="/ukkepuk/source/html/scripts/jquery-1.7.1.js"></script>
        <script src="/ukkepuk/source/html/scripts/topmenu.js"></script>
        
        
                <script>
            var selectedIndex = -1;
            $(document).ready(function() {
                
                //if you clikc on an image thumb, load this kid
                $(".kidthumbtile").click(function(){
                    $(".portalKidInfo").css("display","block");
                    $(".portalMainInfo").css("display","none");
                    //read data
                    selectedIndex = $(this).attr("id").substring(4);
                    var today = new Date();
                    currentYear = today.getYear()+1900;
                    currentMonth = today.getMonth()+1;
                    $.ajax({
                        url: 'actions/invoice.php',
                        type: "POST",
                        data: {kidId: selectedIndex, year: currentYear, month: currentMonth, action: "readKidInvoice"},
                        dataType: "xml",
                        success: function(data) {
                            var fixedprice = parseInt($(data).find("invoice").attr("fixedprice"));
                            var daysinmonth = parseInt($(data).find("invoice").attr("daysinmonth"));
                            
                            var diaperprice = daysinmonth*2;
                            
                            //set address of invoice
                            $(".invoiceaddress > .address").html(
                                $(data).find("invoice").attr("name") + " " +
                                $(data).find("invoice").attr("firstname") + "<br/>" +
                                $(data).find("invoice").attr("street") + " " +
                                $(data).find("invoice").attr("number") + "<br/>" +
                                $(data).find("invoice").attr("postal") + " " +
                                $(data).find("invoice").attr("city") + "<br/>" 
                            );
                                
                            //set invoice details
                            $(".invoiceinfo").html(
                                "Maand: " + $(data).find("invoice").attr("month") + "/" +
                                $(data).find("invoice").attr("year") + "<br/> Factuur#: " +
                                $(data).find("invoice").attr("year") + 
                                $(data).find("invoice").attr("month") + 
                                $(data).find("invoice").attr("kidId")
                            );
                                
                            //set invoice 
                            var invoicedetail = "";
                            $(".invoicerow").remove();
                            invoicedetail += "<tr class=\"invoicerow\"><td>"+daysinmonth+" dagen aanwezig vaste prijs</td><td>1</td><td>"+fixedprice+"</td><td>"+fixedprice+"</td></tr>";
                            
                            $(data).find("calendarItem").each( function() {
                                 invoicedetail += " <tr class=\"invoicerow\"><td class=\"subdetail\">"+$(this).attr("date")+" van "+$(this).attr("starttime")+" tot "+$(this).attr("endtime")+"</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>";
                            });
                            
                            invoicedetail += "<tr class=\"invoicerow\"><td>Pampervergoeding</td><td>"+daysinmonth+"</td><td>2</td><td>"+diaperprice+"</td></tr>";
                            invoicedetail += "<tr class=\"invoicerow\"><td class=\"total\" colspan=\"3\"> Totaal</td><td class=\"detailnum\">"+(diaperprice+fixedprice)+"</td></tr>";
                            
                            $(invoicedetail).appendTo(".invoicedetail")
                        }
                    });
                });
            });
        </script>
        
        <style type="text/css" media="all">
            @import url("/ukkepuk/source/html/css/ukkepukmain.css");
            @import url("/ukkepuk/source/html/css/kidsthumb.css");
            @import url("/ukkepuk/source/html/css/topmenu.css");
            
            
            
        </style>
        
        <style type="text/css" media="print">
            @import url("/ukkepuk/source/html/css/print.css");
            
        </style>
        
         <style>
            #invoice table {
                width: 100%;
            }
            
            #invoice .company {
                font-size: 44px;
                font-style: italic;
                font-weight: bold;
            }
            
            #invoice .invoice {
                font-size: 38px;
                font-weight: bold;
                color: #DEDEDE;
            }
            
            #invoice .companyaddress {
                font-size: 12px;
                color: #2E6E9E;
            }
            
            #invoice .invoiceinfo {
                font-size: 12px;
                color: #2E6E9E;
                padding-bottom: 20px;
            }
            
            #invoice .invoiceaddress {
                font-size: 12px;
                font-weight: bold;
                color: #2E6E9E;
                padding-bottom: 20px;
            }
            
            #invoice .invoiceaddress .address {
                padding-left: 25px;
                font-weight: normal;
            }
            
            #invoice .invoicedetail {
                width: 100%;
                border-collapse: collapse;
            }
            
             #invoice .invoicedetail td{
                border: 1px solid #000000;
                font-size: 12px;
               
            }
             #invoice .invoicedetail td.detail{
                
               
            }
            #invoice .invoicedetail td.detailnum{
                text-align: right;
                width: 100px;
            }
            #invoice .invoicedetail td.subdetail{
                padding-left: 25px;
            }
            
            #invoice .invoicedetail th{
                border: 1px solid #000000;
                background-color: #DEDEDE;
                color: #000;
            }
            
            #invoice .invoicedetail .total {
                border: none;
                text-align: right;
                font-weight: bold;
                padding-right: 15px;
            }
        </style>
        
    </head>
    <body>
        <div id="main">
            <?php require_once($_SERVER['DOCUMENT_ROOT'] . '/ukkepuk/source/php/panels/topmenu.php'); ?>
            <?php include($_SERVER['DOCUMENT_ROOT'] . '/ukkepuk/source/php/panels/KidsTileList.php'); ?>
            <div id="content">
                <div id="invoice">
                    <table>
                        <tr>
                            <td class="company">Huisje Ukkepuk</td>
                            <td class="invoice">Factuur</td>
                        </tr>
                        <tr>
                        <td class="companyaddress">Mevr. Courtmanspark 63 </br> 9200 Oudegem </br> Tel. 052/44.70.75 </br> Email: hilde_de_winne@mail.be</td>
                        <td class="invoiceinfo"></td>
                        </tr>
                        <tr>
                            <td class="invoiceaddress"> Facturatie adres: <br/> <div class="address">Hilde De Winne <br/> Mevr. Courtmanspark 63 </br> 9200 Oudegem </div></td>
                            <td></td>    
                        </tr>        
                        <tr>
                            <td colspan="2">
                                <table class="invoicedetail" >
                                    <tr>
                                        <th>Beschrijving</th>
                                        <th>aantal</th>
                                        <th>eenheid</th>
                                        <th>prijs</th>
                                    </tr>
                                    <tr class="invoicerow">
                                        <td class="detail">19 dagen aanwezig vaste prijs</td>
                                        <td class="detailnum">1</td>
                                        <td class="detailnum">250</td>
                                        <td class="detailnum">250</td>
                                    </tr>
                                    <tr class="invoicerow">
                                        <td class="subdetail">05/01/2012 7:00 tot 15:00</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                    </tr>
                                    <tr class="invoicerow">
                                        <td>Pampervergoeding</td>
                                        <td class="detailnum">19</td>
                                        <td class="detailnum">2</td>
                                        <td class="detailnum">38</td>
                                    </tr>
                                    <tr class="invoicerow">
                                        <td class="total" colspan="3"> Totaal</td>
                                        <td class="detailnum">222</td>
                                    </tr>

                                </table>
                            </td>
                        </tr>
                    </table>
                    <div class="actions">
                        <img src="/ukkepuk/webcontent/images/print.png" id="printbtn" alt="print" onclick="window.print()"/>
                    </div>
                </div>
            </div>
                       
 
        </div>
    </body>
</html>
